import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:like_button/like_button.dart';
import 'package:niu_app/configs/app_style_config.dart';
import 'package:niu_app/pages/model/homepage/dynamics_model.dart';
import 'package:niu_app/views/homepage/photo_view_page.dart';

class DynamicCellWidget extends StatefulWidget {

  final DynamicDataModel dataModel;
  DynamicCellWidget({Key key, this.dataModel}) : super(key: key);
  @override
  _DynamicCellWidgetState createState() => _DynamicCellWidgetState();
}

class _DynamicCellWidgetState extends State<DynamicCellWidget> {
  @override
  Widget build(BuildContext context) {
    return  Container(
      padding: EdgeInsets.symmetric(vertical: 8.h),
      decoration: BoxDecoration(
        border: Border(
          bottom: BorderSide(width: 0.5, color: Colors.grey[200]),
        ),
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            width: 24.w,
            height: 24.w,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(
                Radius.circular(2.r),
              ),
              image: DecorationImage(
                image: NetworkImage(
                  // "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3831697775,1952018276&fm=26&gp=0.jpg",
                  widget.dataModel.headImage??"",
                ),
                fit: BoxFit.cover,
              ),
            ),
          ),
          SizedBox(
            width: 8.w,
          ),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // 头部信息
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          widget.dataModel.userName??"",
                          style: TextStyle(
                            fontSize: 12.sp,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        SizedBox(
                          height: 4.h,
                        ),
                        Row(
                          children: [
                            buildTagLabeWidget("OKEX BTC/USD牛人"),
                            SizedBox(
                              width: 8.w,
                            ),
                            buildTagLabeWidget("Max1"),
                          ],
                        )
                      ],
                    ),
                    Text(
                      widget.dataModel.time??"",
                      style: TextStyle(
                          color: AppStyleConfig.color7,
                          fontSize: 12.sp),
                    )
                  ],
                ),
                // 文本内容
                Padding(
                  padding: EdgeInsets.symmetric(vertical: 8.h),
                  child: Text(
                    widget.dataModel.content??"",
                    style: TextStyle(
                        color: AppStyleConfig.color7,
                        fontSize: 14.sp),
                    maxLines: 3,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),

                SizedBox(
                  height: 10.h,
                ),
                // 图片
                buildImagesContainerWidget(imagePaths: widget.dataModel.images),
                SizedBox(
                  height: 16.h,
                ),
                // 操作
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    // Row(
                    //   children: [
                    //     Icon(
                    //       Icons.linked_camera_outlined,
                    //       color: AppStyleConfig.desTextColor,
                    //       size: 14.sp,
                    //     ),
                    //     SizedBox(
                    //       width: 4.w,
                    //     ),
                    //     Text(
                    //       widget.dataModel.likeCount?.toString()??"",
                    //       style: TextStyle(
                    //           color: AppStyleConfig.desTextColor,
                    //           fontSize: 10.sp),
                    //     ),
                    //   ],
                    // ),

                    buildButtonWidget(count:widget.dataModel.likeCount,icon: Icons.photo_library,isSelected: widget.dataModel.isLike,handle: (value)async{
                      print(value.toString());
                      if (value){
                        widget.dataModel.likeCount -= 1;
                      }else{
                        widget.dataModel.likeCount += 1;
                      }
                      widget.dataModel.isLike = !widget.dataModel.isLike;
                      return widget.dataModel.isLike;
                    }),


                    buildButtonWidget(count:widget.dataModel.commentCount,icon: Icons.messenger_outline_sharp,isSelected: false,handle: (value)async{
                      return false;
                    }),

                    buildButtonWidget(count:widget.dataModel.focus,icon: Icons.center_focus_weak_outlined,isSelected: widget.dataModel.isFocus,handle: (value)async{
                      print(value.toString());
                      if (value){
                        widget.dataModel.focus -= 1;
                      }else{
                        widget.dataModel.focus += 1;
                      }
                      widget.dataModel.isFocus = !widget.dataModel.isFocus;
                      return widget.dataModel.isFocus;
                    }),
                  ],
                )
              ],
            ),
          )
        ],
      ),
    );
  }

  Widget buildImagesContainerWidget({List<String> imagePaths}) {
    if (imagePaths == null || imagePaths?.length == 0) return Container();
    return Container(
      height: imagePaths.length == 1
          ? 200.h
          : imagePaths.length == 2
          ? 140.h
          : 100.h,
      child: GridView.builder(
          padding: EdgeInsets.zero,
          physics: NeverScrollableScrollPhysics(),
          itemCount: imagePaths.length >= 3 ? 3 : imagePaths.length,
          //SliverGridDelegateWithFixedCrossAxisCount 构建一个横轴固定数量Widget
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            //横轴元素个数
            crossAxisCount: imagePaths.length >= 3 ? 3 : imagePaths.length,
            //纵轴间距
            mainAxisSpacing: 5.0,
            //横轴间距
            crossAxisSpacing: 5.0,
            //子组件宽高长度比例
            // childAspectRatio: imagePaths.length == 1 ? (16 / 9) : 1,
          ),
          itemBuilder: (BuildContext context, int index) {
            //Widget Function(BuildContext context, int index)
            return GestureDetector(
              onTap: (){
                Navigator.of(context).push(FadeRoute(page: PhotoViewPage(
                  images:imagePaths,//传入图片list
                  index: index,//传入当前点击的图片的index
                  // heroTag: img,//传入当前点击的图片的hero tag （可选）
                )));
              },
              child: buildImageWidget(
                  imagePath: imagePaths[index],
                  count: index < 2 ? 0 : imagePaths.length - 3),
            );
          }),
    );
  }

  Widget buildImageWidget({String imagePath, int count,}) {
    return Container(
      alignment: Alignment(0,0),
      decoration: BoxDecoration(
        image: DecorationImage(
            image: NetworkImage(
              imagePath,
            ),
            fit: BoxFit.cover),
      ),
      child: Visibility(
        visible: count > 0,
        child: Text(
          "+$count",
          style: TextStyle(
              color: Colors.white,
              fontSize: 24.sp,
              fontWeight: FontWeight.bold),
        ),
      ),
    );
  }

  // 标签
  Widget buildTagLabeWidget(String text) {
    return Container(
      constraints: BoxConstraints(minHeight: 15.h, maxHeight: 15.h),
      alignment: Alignment(0, 0),
      padding: EdgeInsets.symmetric(horizontal: 4.w),
      decoration: BoxDecoration(
        color: AppStyleConfig.background,
        borderRadius: BorderRadius.all(
          Radius.circular(2.r),
        ),
      ),
      child: Text(
        text,
        style: TextStyle(color: Color(0xffFAFAFA), fontSize: 10.sp),
      ),
    );
  }

  // 按钮
  Widget buildButtonWidget({@required int count,@required IconData icon,bool isSelected = false, Future<bool> Function(bool) handle}){


    return LikeButton(
        likeBuilder: (bool isLiked){
          return Icon(icon,color: isLiked ? AppStyleConfig.color8 : Colors.grey,size: 14.sp,);
        },
        likeCountPadding:EdgeInsets.only(left: 0),
        countBuilder:(int likeCount, bool isLiked, String text){
          return Text(text,style: TextStyle(color: Colors.grey,fontSize: 12.sp),);
        },
        likeCount:count,
        isLiked:isSelected,
        onTap:handle
    );

  }
}


class FadeRoute extends PageRouteBuilder {
  final Widget page;
  FadeRoute({this.page}): super(
    pageBuilder: (
        BuildContext context,
        Animation<double> animation,
        Animation<double> secondaryAnimation,
        ) =>page,transitionsBuilder: (
      BuildContext context,
      Animation<double> animation,
      Animation<double> secondaryAnimation,
      Widget child,
      ) =>FadeTransition(
    opacity: animation,
    child: child,
  ),
  );
}